<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
    
<h:head>
<f:loadBundle basename="resources.application" var="msg"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"></link>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
  $(function() {
    $(".datepicker").datepicker({
    	maxDate: "+1w",
    	minDate: "+0d",
    	showAnim: "fold",
    });
    //var currentDate = $( ".selector" ).datepicker( "getDate" );
    //$(".datepicker").datepicker('setDate', new Date());
    
  });
  
  </script>

    <title><h:outputText value="#{msg.welcomeTitle}" /></title>
    <h:outputStylesheet library="css" name="index.css"  />
</h:head>

<body>
<h:form>
<h:commandButton class="adminLoginBtn" action="admin?faces-redirect=true" value="Login as Administrator" />
</h:form>
<h:form>
	<h:inputText class="datepicker" value="#{mainController.filterDate}">
	   	<f:convertDateTime pattern="MM/dd/yyyy" />
	   	<f:ajax event="valueChange" render="dataTable" listener="#{mainController.filter}"/>
	</h:inputText>
<h:dataTable id="dataTable" value="#{mainController.filteredTimeTables}" var="timeTable"
   styleClass="cinemaTable"
   headerClass="cinemaTableHeader"
   rowClasses="cinemaTableOddRow,cinemaTableEvenRow">
   <h:column>    				
      <f:facet name="header">Movie</f:facet>    				    				
      <h:outputText value="#{timeTable.movie.title}"
         rendered="#{not timeTable.canEdit}" />
   </h:column>
   <h:column>
      <f:facet name="header">Start time</f:facet>
      <h:outputText value="#{timeTable.startTime}"
         rendered="#{not timeTable.canEdit}" />
   </h:column>
   <h:column>
      <f:facet name="header">Room</f:facet>
      <h:outputText value="#{timeTable.room.name}"
         rendered="#{not timeTable.canEdit}" />
   </h:column>
</h:dataTable>
</h:form> 
</body>
</html>